<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>



	<script>

		//2.1rev(元素宽度需要设置与CSS一致)
		$(function(){  
		  $('#container').masonry({  
		    // options 设置选项  
		    itemSelector : '.item', //子类元素选择器  
		    columnWidth : 240 ,//一列的宽度 ，包括边距 220+10+10  
		    isAnimated:true, //使用jquery的布局变化，是否启用动画效果  
		    animationOptions:{  
		    //jquery animate属性 ，动画效果选项。比如渐变效果 Object { queue: false, duration: 500 }  
		    },  
		    gutterWidth:15,//列的间隙  
		    isFitWidth:true,//自适应宽度  
		    isResizableL:true,// 是否可调整大小  
		    isRTL:false,//使用从右到左的布局  
		  });  
		});  



		//3.0rev
		$('.grid').masonry({
			columnWidth: 200,
			itemSelector: '.grid-item',     // 要布局的网格元素
			gutter:10,                     // 网格间水平方向边距，垂直方向边距使用css的margin-bottom设置
			percentPosition:true,           // 使用columnWidth对应元素的百分比尺寸
			stamp:'.grid-stamp',             // 网格中的固定元素，不会因重新布局改变位置，移动元素填充到固定元素下方
			fitWidth: true,                  // 设置网格容器宽度等于网格宽度，这样配合css的auto margin实现居中显示
			originLeft: true,                // 默认true网格左对齐，设为false变为右对齐
			originTop: true,                 // 默认true网格对齐顶部，设为false对齐底部
			containerStyle: { position: 'relative' },     // 设置容器样式
			transitionDuration: '0.8s',      // 改变位置或变为显示后，重布局变换的持续时间，时间格式为css的时间格式
			stagger: '0.03s',                // 重布局时网格并不是一起变换的，排在后面的网格比前一个延迟开始，该项设置延迟时间  
			resize: false,                  // 改变窗口大小将不会影响布局
			initLayout: true                // 初始化布局，设未true可手动初试化布局
		});
		//方法调用方式
		// jQuery方式。重新布局，添加元素，另一种方式添加元素，重新布局
		$grid.masonry().append( elem ).masonry( 'appended', elem ).masonry();

		// vanilla方式。同上
		var msnry = new Masonry( '.grid', {...});
		gridElement.appendChild( elem );
		msnry.appended( elem );
		msnry.layout();
		全部方法
		$grid.masonry();                             // 重新布局
		$grid.masonry( options );                    // 修改设置，再重新布局
		$grid.masonry( 'layoutItems', items, isStill );     // 重布局指定元素，isStill接受布尔值，表示是否变换
		$grid.masonry( 'stamp', $stamp );            // 固定元素
		$grid.masonry( 'unstamp', $stamp );          // 解除固定
		$grid.masonry( 'appended', elements );       // 在最后添加元素
		$grid.masonry( 'prepended', elements );      // 在最前添加元素    
		$grid.masonry( 'addItems', elements );       // 添加元素，但不布局
		$grid.masonry( 'remove', elements );         // 删除元素    

 
		//全部事件
		// jQuery方式
		var msnry = $grid.masonry( 'on', eventName, listener );
		var msnry = $grid.masonry( 'off', eventName, listener );
		var msnry = $grid.masonry( 'once', eventName, listener );

		// vanilla方式
		msnry.on( eventName, listener );
		msnry.off( eventName, listener );
		msnry.once( eventName, listener );

		// jQuery,布局完成事件和移除完成事件
		$grid.on( 'layoutComplete', function( event, items ) {
		  console.log( items.length );
		});
		$grid.on( 'removeComplete', function( event, removedItems ) {...} )     

		// vanilla，同上
		msnry.on( 'layoutComplete', function( event, items ) {
		  console.log( items.length );
		});
		msnry.on( 'removeComplete', function( event, removedItems ) {...} )
		//Utilties
		$grid.masonry('reloadItems');     // 重新载入元素，适用Angular和React被改变DOM元素后
		$grid.masonry('destroy');         // 移除Masonry,元素返回初试化前状态
		var elems = $grid.masonry('getItemElements');     // 返回网格元素
		var msnry = $('.grid').data('masonry');           // 返回Masonry实例
		var msnry = Masonry.data( $('.grid')[0] );        // 根据网格，返回Masonry实例


		https://segmentfault.com/a/1190000007316788

		http://www.warting.com/web/201412/75579.html
</script>	
</body>


</html>